<template>
    <div class="page">
        <Header left-arrow title="竞价投放" />
        <div class="content">
            <div class="card">
                <div class="title">
                    请选择您要投放的城市
                </div>
                <div class="city-select">
                    <div class="field" @click="selectCity">
                        <div class="field-label">
                            <span class="icon iconfont icon-sousuo"></span>
                        </div>
                        <div class="field-input">
                            <span class="placeholder">请输入城市名称</span>
                        </div>
                    </div>
                </div>
                <div class="summary-count">
                    <div>
                        已选择<span class="count">{{ checkedCityList.length }}</span>个城市
                    </div>
                </div>
                <div class="checked-city-list">
                    <template v-for="(city, index) in checkedCityList" :key="city.id">
                        <Tag :name="city.name" @del="clearCurrentCity(index)"></Tag>
                    </template>
                </div>
            </div>
        </div>

        <footer class="footer">
            <Button :disabled="!checkedCityList.length" block type="primary" @click="next">
                下一步
            </Button>
            <div class="van-safe-area-bottom"></div>
        </footer>
    </div>
    <city-area-selecter
        :list="formData.cityList"
        :selected="formData.cityCodeList"
        :show="showCityPicker"
        @close="showCityPicker = false"
        @confirm="onCityConfirm"
    />
</template>

<script name="productsBid" lang="ts" setup>
import { ref, reactive, onActivated } from 'vue';
import { useRouter } from 'vue-router';
import { Button } from 'vant';
import Tag from '@/components/tag.vue';
import Header from '@/components/Header/index.vue';
import CityAreaSelecter from '@/components/CityAreaSelecter/index.vue';
import {getCityTreeData} from '@/api/common';
import {TreeChildModel, ReturnData} from '@/components/CityAreaSelecter/city.module';

window.scrollTo(0, 0);
const router = useRouter();

const showCityPicker = ref<boolean>(false);

interface FormData {
    cityList: TreeChildModel[];
    cityCodeList: string[];
}

const formData: FormData = reactive({
    cityList: [],
    cityCodeList: [],
});

const checkedCityList = ref<TreeChildModel[]>([]);
const cityCodeList = ref([]);

const clearCurrentCity = (index: number) => {
    checkedCityList.value.splice(index, 1);
    formData.cityCodeList.splice(index, 1);
};

const selectCity = async () => {
    try {
        formData.cityList = await getCityTreeData(0);
        formData.cityCodeList = cityCodeList.value;
    } catch (error) {
        formData.cityList = [];
    }
    showCityPicker.value = true;
};

const onCityConfirm = (value: ReturnData) => {
    checkedCityList.value = value.checkedData;
    formData.cityCodeList = value.selected;
    cityCodeList.value = value.selected as never;
};

const next = async () => {
    await router.push({
        name: 'productsBidStrategyCheck',
        params: {
            cityList: JSON.stringify(checkedCityList.value),
        },
    });
};

onActivated(() => {
    formData.cityCodeList = [];
});
</script>

<style lang="scss" scoped>
.page {
    background: #f4f4f4;
    min-height: calc(100vh - 50px);
}

.content {
    padding: 12px;
    margin-bottom: 50px;
}

.card {
    box-sizing: border-box;
    padding: 16px 12px 6px;
    background: #ffffff;
    border-radius: 10px;

    .title {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
    }
}
.city-select {
    margin-top: 16px;
    background: #ffffff;

    .field {
        height: 36px;
        background: #f8f8f8;
        border-radius: 6px;
        display: flex;
        align-items: center;

        .field-label {
            height: 20px;
            font-weight: 600;
            font-size: 14px;
            color: #333333;
            position: relative;
            padding: 2px 6px 0 12px;
            .icon-sousuo {
                color: #bfbfbf;
                font-size: 16px;
                // margin-right: 4px;
            }
        }
        .field-input {
            flex: 1;

            .placeholder {
                font-weight: 400;
                font-size: 14px;
                color: #d2d2d2;
            }
        }
    }
}

.summary-count {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 16px 0 12px;

    span {
        display: inline-block;
    }

    .count {
        color: #e60044;
        margin: 0 5px;
        font-weight: bold;
    }
}

.checked-city-list {
    display: flex;
    flex-wrap: wrap;
    // min-height: 300px;
    transition: all 0.5s;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 12px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 -2px 4px 0 #ebebeb80;
    z-index: 1;

    .van-button {
        height: 38px;
        line-height: 38px;
        background: #e60044;
        border-radius: 6px;
        border: 0;
    }
}
</style>
